<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()">
				<image src="../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="text f36 cfff">供应商信息</view>
			<view class="btn">
				<view class="define f30" @tap="save">保存</view>
			</view>
		</view>

		<view class="supplierinfo">

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">* 姓名</view>
				</view>
				<view class="right">
					<input type="text" :placeholder="info.name" v-model="name" />
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">联系人</view>
				</view>
				<view class="right">
					<input type="text" :placeholder="info.contact=='' ? '无' : info.contact" v-model="contact" />
					<image src="../../static/images/icon_person.png" mode="aspectFit"></image>
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">手机</view>
				</view>
				<view class="right">
					<input type="text" :placeholder="info.tel =='' ? '无' : info.tel" v-model="tel" />
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">电话</view>
				</view>
				<view class="right">
					<input type="text" :placeholder="info.mobile =='' ? '无' : info.mobile" v-model="mobile"/>
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">所属地区</view>
				</view>
				<view class="right">
					<pickerAddress class="f30 c999" @change="change">{{province==''?'点我选择所在地区':province}}{{city}}{{area}}</pickerAddress>
					<image src="../../static/images/arrow_right.png" mode="aspectFit" style="width: 20rpx;height: 35rpx;"></image>
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">详细地址</view>
				</view>
				<view class="right">
					<input type="text" :placeholder="info.address=='' ? '无' : info.address" v-model="address" />
				</view>
			</view>


			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">备注</view>
				</view>
				<view class="right">
					<input type="text" :placeholder="info.remark =='' ? '无' : info.remark" v-model="remark" />
				</view>
			</view>
		</view>

	   <!-- 删除供应商 -->
	   <view class="deleteBtn" @tap="deleteBtn" >
		   <view class="text">删除供应商</view>
	   </view>

	</view>
</template>

<script>
	import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue';
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				province: '',
				city: '',
				area: '',
				supplierId:'',
				name:'',
				contact:'', //联系人
				mobile:'', //手机号
				tel:'', //电话
				address:'', //详细地址
				debt:'', //欠供应商款
				remark:'', //备注
				info:[]
			};
		},
		onShow() {
			this.supplierId=uni.getStorageSync('supplierId')
			 this.getInfo()
		},
		onLoad() {
         
		},
		methods: {
			change(data) {
				this.province=data.data[0]
				this.city=data.data[1]
				this.area=data.data[2]
			},
			//供应商详情
			
			getInfo(){
				let that=this;
				that.$ajax('api/v1.supplier/info',{
					supplier_id:that.supplierId
				}).then(res=>{
					if(res.code==1){
						that.info=res.result
					}
				}).catch(res=>{
					that.$sToast(res.message)
				})
			},
			//供应商修改
			
			save(){
				let that=this;
				that.$ajax('api/v1.supplier/edit',{
					supplier_id:that.supplierId,
					name:that.name=='' ? that.info.name : that.name,
					contact:that.contact =='' ? that.info.contact : that.contact,
					mobile:that.mobile =='' ? that.info.mobile : that.mobile,
					tel:that.tel =='' ? that.info.tel : that.tel,
					address:that.address =='' ? that.info.address : that.address,
					debt:that.debt =='' ? that.info.debt : that.debt,
					remark:that.remark =='' ? that.info.remark : that.remark
				}).then(res=>{
					if(res.code==1){
						that.$sToast('修改成功')
					}
				}).catch(res=>{
					that.$sToast(res.message)
				})
			},
			//删除供应商
			deleteBtn(){
				let that=this;
				that.$ajax('api/v1.supplier/del',{
					supplier_id:that.supplierId
				}).then(res=>{
					if(res.code==1){
						that.$sToast('删除成功')
					}
				}).catch(res=>{
					that.$sToast(res.message)
				})
			}
	
		}
		}
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #249AF6;
		padding: 60upx 30upx 25upx 30upx;
		text-align: center;

		.arrow {
			image {
				width: 20upx;
				height: 40upx;
			}
		}

		.btn {
			display: flex;
			flex-direction: row;
			color: #fff;

			.define {
				margin-left: 30upx;
			}
		}
	}

	.supplierinfo {
		margin-top: 30upx;

		.supplier-item {
			background-color: $white-background;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2upx #eee solid;
			height: 105upx;
			line-height: 105upx;
			padding: 0 30upx;

			&:nth-child(5),
			&:nth-child(7),
			&:last-child {
				margin-top: 20upx;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				image {
					width: 20upx;
					height: 35upx;
				}

				input {
					width: 100%;
					font-size: 30upx;
					color: #999;
					height: 105upx;
					line-height: 105upx;
					text-align: right;
				}

				image {
					width: 44upx;
					height: 44upx;
					margin-left: 20upx;
				}
			}
		}
	}
	.deleteBtn{
		height: 90upx;
		line-height: 90upx;
		margin-top: 30rpx;
		background-color: $white-background;
		.text{
			font-size: 30upx;
			text-align: center;
			color: #F64444;
		}
	}
</style>
